Grilles : CSS grid
Principe
La propriété css grid permet de mettre en place un modèle à deux dimensions performant.
Il faut définir un conteneur (parent) auquel appliquer le style display:grid. Les enfants seront automatiquement formatés, ils pourront recevoir des propriétés spécifiques aux éléments de grille.
Exemple :
CODE (pas important maintenant, la suite d'abord)
<![CDATA[
<div class="grid-parent">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
<div>g</div>
<div>h</div>
</div>
]]>
<![CDATA[
.grid-parent {
display: grid;
grid-template-rows: 50px 80px;
grid-template-columns: 40px 200px 100px;
grid-gap: 5px;
}
.grid-parent div{
background-color: #abc;
border:1px solid black;
}
]]>
Propriétés de base
Une grille est composée de colonnes (columns) et de rangées (rows). On va pouvoir disposer les éléments de grille selon ces colonnes et rangées.
Les colonnes et les rangées des grilles sont séparées par des lignes imaginaires qui servent à définir les «cellules» de la grille.
On peut définir le nombre et la taille de chacune de ces colonnes et rangées grâce aux propriétés :
grid-template-columns : largeurs de colonnes
grid-template-rows : hauteurs de lignes
qu’on appliquera au conteneur de grille.
On va pouvoir passer des valeurs de type longueur (en px par exemple), pourcentage %, fraction fr ou la valeur auto aux propriétés grid-template-columns et grid-template-rows.
Cela va nous permettre de créer des colonnes et des rangées de tailles fixes ou variables.
La valeur auto est utile pour utiliser la place restante.
Exemples
<![CDATA[
<div class="grid-parent-2">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
]]>
<![CDATA[
.grid-parent-2{
display: grid;
grid-template-columns: 100px auto;
grid-template-rows: 50px 50px;
}
.grid-parent-2 div{
background-color: yellow;
border:1px solid black;
text-align: center;
}
]]>
<![CDATA[
<div class="grid-parent-3">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
]]>
<![CDATA[
.grid-parent-3{
display: grid;
grid-template-columns: 10vw auto 10vw;
grid-template-rows: 50px;
}
.grid-parent-3 div{
background-color: #2B8;
border:1px solid black;
text-align: center;
}
]]>
Ici la largeur des colonnes se fait grâce à l'unité de fractions fr
<![CDATA[
<div class="grid-parent-4">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
</div>
]]>
<![CDATA[
.grid-parent-4{
display: grid;
grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
grid-template-rows: 50px;
}
.grid-parent-4 div{
background-color: pink;
border:1px solid black;
text-align: center;
}
]]>
Positionner dans la grille
Par défaut, les éléments de grille n’occupent qu’une colonne et qu’une ligne et se placent dans l’ordre de leur écriture.
Mais nous pouvons positionner précisément les éléments dans la grille grâce aux propriétés :
grid-column-start : colonne de départ
grid-column-end : colonne d'arrivée
grid-row-start : ligne de départ
grid-row-end : ligne d'arrivée
<![CDATA[
<div class="grid-parent-5">
<div class="un">a</div>
<div class="deux">b</div>
<div class="trois">c</div>
</div>
]]>
<![CDATA[
.grid-parent-5{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 50px;
}
.grid-parent-5 div{
background-color: rgb(200,100,50);
border:1px solid black;
text-align: center;
}
.grid-parent-5 .trois{
grid-column-start: 4;
grid-column-end: 5;
}
]]>
<![CDATA[
<div class="grid-parent-6">
<div class="un">a</div>
<div class="deux">b</div>
<div class="trois">c</div>
</div>
]]>
<![CDATA[
.grid-parent-6{
display: grid;
border:1px solid rgba(0,0,0,0.2);
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 50px 50px 50px;
}
.grid-parent-6 div{
background-color: rgb(100,200,50);
border:1px solid black;
text-align: center;
}
.grid-parent-6 .deux{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.grid-parent-6 .trois{
grid-column-start: 5;
grid-column-end:6;
grid-row-start: 3;
grid-row-end: 4;
}
]]>
<![CDATA[
<div class="grid-parent-7">
<div class="un">a</div>
<div class="deux">b</div>
<div class="trois">c</div>
</div>
]]>
<![CDATA[
.grid-parent-7{
display: grid;
border:1px solid rgba(0,0,0,0.2);
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 50px 50px 50px;
}
.grid-parent-7 div{
background-color: rgb(100,50,200);
border:1px solid black;
text-align: center;
}
.grid-parent-7 .deux{
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 4;
}
.grid-parent-7 .trois{
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 4;
}
]]>
Aligner dans la grille
Les éléments de grille sont alignés par défaut pour utiliser toute la place de la cellule.
Il est possible pour gérer l'alignement en utilisant la propriété justify-item pour aligner toutes les cellules enfant.
Par défaut la propriété justify-items à la valeur stretch.
Pour spécifier l'alignement d'un enfant en particulier on utilisera la propriété justify-self
Les valeurs possibles sont : stretch, start, end
aaaaa
bbbbb
ccccc
ddddd
eeeee
fffff
ggggg
hhhhh
iiiii
<![CDATA[
<div class="grid-parent-8">
<div class="un">aaaaa</div>
<div class="deux">bbbbb</div>
<div class="trois">ccccc</div>
<div class="quatre">ddddd</div>
<div class="cinq">eeeee</div>
<div class="six">fffff</div>
<div class="sept">ggggg</div>
<div class="huit">hhhhh</div>
<div class="neuf">iiiii</div>
</div>
]]>
<![CDATA[
.grid-parent-8 {
display: grid;
background-color: rgba(0, 250, 50, 0.1);
border: 1px solid rgba(0, 0, 0, 0.2);
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px 50px;
justify-items: stretch;
}
.grid-parent-8 div {
background-color: rgb(0, 250, 50);
border: 1px solid black;
text-align: center;
}
.grid-parent-8 .quatre, .grid-parent-8 .cinq, .grid-parent-8 .six {
justify-self: start;
}
.grid-parent-8 .sept, .grid-parent-8 .huit, .grid-parent-8 .neuf {
justify-self: end;
}
]]>